<template>
	<view style="background-color: #fefefe;">
		<my-navbar></my-navbar>
		<view>
			<view class="u-text-center m-avatar">
				<view class="m-avatar-img u-text-center">
					<u-avatar :size="150" bg-color="#fefefe"></u-avatar>
				</view>
				<view class="u-text-center u-font-18" style="margin-top: 18rpx;">
					<text style="color: #fefefe;">欢迎您：{{name}}</text>
				</view>
			</view>

			<!-- 提表预约部分 -->
			<view class="m-cell" style="margin-top: 20rpx;">
				<u-cell-item @click="goToAppointmentPage" title="提表预约"></u-cell-item>
			</view>
			
			<view class="m-cell" style="margin-top: 20rpx;">
			  <u-cell-item @click="goToAppointmentOrderPage" title="我的预约订单"></u-cell-item>
			</view>

			<!-- 地址和联系方式部分 -->
			<view class="m-cell" style="margin-top: 20rpx;">
				<u-cell-group>
					<u-cell-item title="联系地址:河北省石家庄市"></u-cell-item>
					<u-cell-item title="联系电话:12345654321"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			avatar: require("@/static/3.jpg"),
			name: '用户'
		};
	},
	created() {
		this.userInfo = uni.getStorageSync("userInfo");
		this.avatar = this.userInfo.avatarUrl;
		this.name = this.userInfo.nickName;
	},
	methods: {
		// 跳转到我的预约订单页面
		goToAppointmentOrderPage() {
			this.$u.route('/pages/list2/list2'); // 跳转到“我的预约订单”页面
		},
		// 跳转到提表预约页面
		goToAppointmentPage() {
			this.$u.route('/pages/list/list'); // 跳转到预约信息页面
		}
	}
};
</script>

<style>
.m-avatar-img {
	height: 150rpx;
	width: 150rpx;
	position: relative;
	left: 40%;
	border-radius: 50px;
	box-shadow: 0rpx 2rpx 10rpx #000000;
}

.m-cell {
	margin-top: 20rpx;
	margin-left: 40rpx;
	margin-right: 40rpx;
	background-color: #159FDE;
	box-shadow: 0rpx 0rpx 10rpx #878787;
}

.m-avatar {
	z-index: -1;
	height: 350rpx;
	padding: 40rpx 0rpx;
	padding-top: 50rpx;
	background-color: #159FDE;
}
</style>
